<template>
  <el-container class="admin-container">
    <!-- 顶部导航栏 -->
    <el-header class="admin-header">
      <div class="admin-title">Zero</div>
      <div class="admin-user">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar :src="user.avatar_url" size="big" />
            <span class="username">{{ user.username }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px" class="admin-sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          background-color="#f8fafc"
          text-color="#1f2937"
          active-text-color="#10b981"
          router
          @select="handleMenuSelect"
        >
          <el-menu-item index="/system/all">
            <el-icon><Home /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/system/user">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/system/comment">
            <el-icon><MessageSquareText /></el-icon>
            <span>评论管理</span>
          </el-menu-item>
          <el-menu-item index="/system/like">
            <el-icon><Star /></el-icon>
            <span>点赞记录</span>
          </el-menu-item>
          <el-menu-item index="/system/post">
            <el-icon><stickyNote /></el-icon>
            <span>帖子信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主内容区 -->
      <el-main class="admin-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Home, User, Star, MessageSquareText,StickyNote } from 'lucide-vue-next'
import { useStore } from '../../store/index'

const store = useStore()
const router = useRouter()
const route = useRoute()
const user = store.getUserInfo()

// 当前激活菜单（优先读取sessionStorage）
const activeMenu = ref(sessionStorage.getItem('activeMenu') || '/system/all')

// 初始化检查路由状态
onMounted(() => {
  if (route.path !== '/system/all') {
    router.push('/system/all')
  }
})

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    if (newPath !== activeMenu.value) {
      activeMenu.value = newPath
      sessionStorage.setItem('activeMenu', newPath)
    }
  },
  { immediate: true }
)

// 处理菜单点击
const handleMenuSelect = (index) => {
  activeMenu.value = index
  sessionStorage.setItem('activeMenu', index)
}

// 退出登录
const handleLogout = () => {
  ElMessage.success('退出登录成功')
  sessionStorage.removeItem('activeMenu')
  store.clearToken()
  router.push('/login')
}
</script>
<style scoped lang="scss">
$primary-color: #10b981;
$secondary-color: #3b82f6;
$text-color: #1f2937;
$border-color: #e5e7eb;
$background-color: #f8fafc;

.admin-container {
  height: 100vh;
  background-color: $background-color;
}

.admin-header {
  background-color: #ffffff;
  border-bottom: 1px solid $border-color;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;

  .admin-title {
    font-size: 20px;
    font-weight: 600;
    color: $text-color;
  }

  .admin-search {
    flex: 1;
    max-width: 400px;
    margin: 0 20px;

    .search-input {
      width: 100%;

      :deep(.el-input__wrapper) {
        border-radius: 20px;
        background-color: $background-color;
        border: 1px solid $border-color;

        &:hover {
          border-color: $primary-color;
        }

        &:focus-within {
          border-color: $primary-color;
          box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
        }
      }
    }
  }

  .admin-user {
    display: flex;
    align-items: center;
    gap: 10px;

    .el-dropdown-link {
      display: flex;
      align-items: center;
      cursor: pointer;

      .username {
        margin-left: 8px;
        font-size: 14px;
        color: $text-color;
      }
    }
  }
}

.admin-sidebar {
  background-color: #ffffff;
  border-right: 1px solid $border-color;

  .sidebar-menu {
    border-right: none;

    .el-sub-menu {
      .el-menu-item {
        padding-left: 50px !important;
      }
    }
  }
}

.admin-main {
  padding: 20px;
  background-color: $background-color;
}

@media (max-width: 768px) {
  .admin-header {
    .admin-search {
      display: none;
    }
  }

  .admin-sidebar {
    width: 60px !important;

    .sidebar-menu {
      .el-sub-menu {
        .el-menu-item {
          padding-left: 20px !important;
        }
      }
    }
  }
}
</style>